<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }
        main{
            position: relative;
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 10px #fff;           
        }
        #clock{
            width: 380px;
            height: 380px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            border-radius: 50%;
            box-shadow:inset 0 0 10px #fff;    
            
        }
        main #clock .num{
            position: absolute;
            color:#fff;
            font-size: 50px;
            font-weight: 800px;
        }
        .num:first-child{
            top: 9px;
        }
        .num:nth-child(2){
            right: 15px;
        }
        .num:nth-child(3){
            bottom:9px;
        }
        .num:nth-child(4){
            left: 20px;
        }
        main .aa{
            position: absolute;
            top: 0;
            width: 6px;
            height: 40px;
            background-color: #fff;
            transform-origin: center 200px;
        }
        main #circle{
            position: absolute;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px #fff;
        }
        main #_hour{
            position: absolute;
            top:50%;
            width: 10px;
            height: 60px;
            background-color: #fff;
            box-shadow: 0 0 10px #fff;
            transform: translateY(-100%);
            transform-origin: center bottom;
        }
        main #_min{
            position: absolute;
            top:50%;
            width: 7px;
            height: 100px;
            background-color: #fff;
            box-shadow: 0 0 10px #fff;
            transform: translateY(-100%);
            transform-origin: center bottom;
        }main #_sec{
            position: absolute;
            top:50%;
            width: 3px;
            height: 130px;
            background-color: #fff;
            box-shadow: 0 0 10px #fff;
            transform: translateY(-100%);
            transform-origin: center bottom;
        }
    </style>
</head>
<body>
    <main>
        <div id="clock">
            <div class="num">12</div>
            <div class="num">3</div>
            <div class="num">6</div>
            <div class="num">9</div>  
        </div>  
        <div id="circle"></div>
        <div id="_hour"></div>
        <div id="_min"></div>
        <div id="_sec"></div>
    </main>

    <script>
     let oClock=document.querySelector("#clock");
     let oHour=document.querySelector("#_hour");
     let oMin=document.querySelector("#_min");
     let oSec=document.querySelector("#_sec");

     for(let i=1;i<9;i++){
         oH=document.createElement('div')
         oH.className='aa';
         if(i<3){
             oH.style.transform='rotate('+ 30*i +'deg)';
         }else if(i<5){
             oH.style.transform='rotate('+ 30*(i+1) +'deg)';
         }else if(i<7){
             oH.style.transform='rotate('+ 30*(i+2) +'deg)';
         }else{
              oH.style.transform='rotate('+ 30*(i+3) +'deg)';
         }
         oClock.appendChild(oH);
     }

     let run = ()=>{
        let oDate=new Date();
        let iH=oDate.getHours();
        let iM=oDate.getMinutes();
        let iS=oDate.getSeconds();
        console.log("现在是："+iH+"时"+iM+"分"+iS+"秒");

        if(iH>12){
            oHour.style.transform="translateY(-100%) rotate("+ 30*(iH%12)+"deg)";
        }else{
            oHour.style.transform="translateY(-100%) rotate("+ 30*iH+"deg)";
        }
        oMin.style.transform="translateY(-100%) rotate("+ 6*iM+"deg)";
        oSec.style.transform="translateY(-100%) rotate("+ 6*iS+"deg)";
     }
     run();
     setInterval(run,1000);
 </script>
</body>
</html>